{#if password.length>=MIN_CHARACTERS}
<!-- <div class="password-strength">
    <div style="height: 7px; margin-bottom:0; border-radius: 0" class="progress progress-{passwordStrength.score >= 3 ? 'success' :
        passwordStrength.score < 2 ? 'danger' : 'warning'}">
        <div class="bar" style="width: {Math.max(5, 100*(passwordStrength.score/4))}%;"></div>
    </div>
</div> -->
{/if}

<script type="text/javascript">
    import { __ } from '@datawrapper/shared/l10n';

    const MIN_CHARACTERS = 8;

    let zxcvbn;
    let zxcvbnLoading = false;

    function loadZxcvbn() {
        zxcvbnLoading = true;
        require(['zxcvbn'], pkg => {
            zxcvbn = pkg;
        });
    }

    export default {
        data: () => ({
            password: ''
        }),
        computed: {
            passwordTooShort({ password }) {
                return password.length < MIN_CHARACTERS;
            },
            passwordStrength({ password }) {
                if (!zxcvbn) {
                    if (!zxcvbnLoading && password.length > 4) {
                        loadZxcvbn();
                    }
                    return false;
                }
                return zxcvbn(password);
            },
            passwordHelp({ password, passwordStrength }) {
                if (password === '' || !passwordStrength) {
                    return __('account / pwd-too-short').replace('%num', MIN_CHARACTERS);
                }
                const score = ['bad', 'weak', 'ok', 'good', 'excellent'][passwordStrength.score];
                return __(`account / password / ${score}`);
            },
            passwordError({ password, passwordTooShort, passwordStrength, passwordHelp }) {
                if (!password) return false;
                if (passwordTooShort)
                    return __('account / pwd-too-short').replace('%num', MIN_CHARACTERS);
                if (passwordStrength && passwordStrength.score < 2) return passwordHelp;
                return false;
            },
            passwordSuccess({ passwordStrength, passwordHelp }) {
                return passwordStrength && passwordStrength.score > 2 ? passwordHelp : false;
            },
            passwordOk({ password, passwordTooShort }) {
                return password && !passwordTooShort;
            }
        },
        helpers: {
            MIN_CHARACTERS
        }
    };
</script>
